<template>
  <div class="task-config-swapper">
    <!-- 检查是否在详情页路由中，如果是则只显示router-view -->
    <template v-if="$route.path.includes('dataDetail')">
      <router-view />
    </template>
    <template v-else>
      <el-card>
        <el-form
          :inline="true"
          v-model="formSearchTaskInfo"
          class="demo-form-inline"
        >
          <el-form-item label="任务名称">
            <el-input
              v-model="formSearchTaskInfo.taskName"
              placeholder="请输入关键字查询"
            />
          </el-form-item>
          <el-form-item label="开始日期">
            <el-date-picker
              v-model="formSearchTaskInfo.dateRange"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="YYYY-MM-DD"
              :disabled-date="disableFutureDates"
              :prefix-icon="NoIcon"
            >
              <!-- 2. 右侧图标 -->
              <template #suffix>
                <el-icon class="right-icon"><Calendar /></el-icon>
              </template>
            </el-date-picker>
          </el-form-item>
          <el-form-item label="区域">
            <el-select
              v-model="formSearchTaskInfo.region"
              placeholder="区域"
              clearable
              filterable
              style="width: 100px"
            >
              <el-option
                v-for="opt in regionOptions"
                :key="opt.value"
                :label="opt.label"
                :value="opt.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="状态">
            <el-select
              v-model="formSearchTaskInfo.status"
              placeholder="状态"
              clearable
              filterable
              style="width: 100px"
            >
              <el-option
                v-for="opt in statusOptions"
                :key="opt.value"
                :label="opt.label"
                :value="opt.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">查询</el-button>
            <el-button plain>重置</el-button>
          </el-form-item>
        </el-form>
        <div class="task-tabs-container">
          <!-- 任务类型Tab切换组件 -->
          <el-tabs
            v-model="activeTab"
            class="task-tabs"
            @tab-change="handleTabChange"
          >
            <!-- 通过遍历生成Tab项 -->
            <el-tab-pane
              v-for="tab in taskTabs"
              :key="tab.name"
              :label="tab.label"
              :name="tab.name"
            >
              <TabComponent
                v-if="activeTab === tab.name"
                :table-data="tableData"
              />
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-card>
    </template>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, h } from "vue";
import type { TaskTab } from "./types.dt";
import TabComponent from "./components/TabComponent.vue";
import { Calendar } from "@element-plus/icons-vue";

const table = [
  {
    id: "1",
    source: "AI识别",
    taskName: "田间巡查",
    taskArea: "蓝莓",
    executeUser: "张三",
    entryRequirements:
      "请针对蓝莓请针对蓝莓请针对蓝莓请针对蓝莓请针对蓝莓请针对蓝莓请针对蓝莓",
    startDate: "2025-08-13",
    endDate: "2025-08-13",
    creator: "张三",
    taskStatus: "1",
  },
  {
    id: "2",
    source: "AI识别",
    taskName: "田间巡查",
    taskArea: "蓝莓",
    executeUser: "张三",
    entryRequirements: "请针对蓝莓",
    startDate: "2025-08-13",
    endDate: "2025-08-13",
    creator: "张三",
    taskStatus: "1",
  },
  {
    id: "3",
    source: "AI识别",
    taskName: "田间巡查",
    taskArea: "蓝莓",
    executeUser: "张三",
    entryRequirements: "请针对蓝莓",
    startDate: "2025-08-13",
    endDate: "2025-08-13",
    creator: "张三",
    taskStatus: "1",
  },
  {
    id: "4",
    source: "AI识别",
    taskName: "田间巡查",
    taskArea: "蓝莓",
    executeUser: "张三",
    entryRequirements: "请针对蓝莓",
    startDate: "2025-08-13",
    endDate: "2025-08-13",
    creator: "张三",
    taskStatus: "0",
  },
];
const tableData = ref(table);
// 空组件：用来“关掉”左侧图标
const NoIcon = ref(() => h("span"));
const disableFutureDates = (date: Date) => date.getTime() > Date.now();
// search 字段
const formSearchTaskInfo = reactive({
  taskName: "", // 任务名称
  dateRange: "", // 开始日期
  region: "", // 区域
  status: "", // 状态
});
// 区域 Options
const regionOptions = ref([
  { label: "全部", value: "0" },
  { label: "草莓", value: "1" },
  { label: "蓝莓", value: "2" },
]);
// 状态 Options
const statusOptions = ref([
  { label: "全部", value: "0" },
  { label: "待下发", value: "1" },
  { label: "进行中", value: "2" },
  { label: "已结束", value: "3" },
  { label: "已失效", value: "4" },
]);
// 定义tab数量
const taskTabs: TaskTab[] = [
  {
    name: "ggzg",
    label: "灌溉主管",
  },
  {
    name: "zbzg",
    label: "植保主管",
  },
  {
    name: "nsszzg",
    label: "农事生长主管",
  },
  {
    name: "cz",
    label: "场长",
  },
];
// 当前激活的Tab
const activeTab = ref<string>("ggzg");

// Tab切换事件处理
function handleTabChange(name: string) {
  activeTab.value = name;
  if (name === "zbzg") {
    tableData.value = [];
  } else {
    tableData.value = table;
  }
  // 可以在这里添加Tab切换后的逻辑
}
</script>

<style lang="scss" scoped>
.task-config-swapper {
  height: calc(100vh - 100px);
  .el-card {
    height: 100%;
  }
  padding: 20px;
  .demo-form-inline {
    width: 100%;
    margin-top: 20px;
  }
  .el-input__suffix {
    display: flex;
    align-items: center;
  }
}
</style>
